<template>
  <vue-better-scroll class="wrapper"
                     ref="scrollqq"
                     :scrollbar="scrollbarObj"
                     :pullDownRefresh="pullDownRefreshObj"
                     :pullUpLoad="pullUpLoadObj"
                     :startY='parseInt(startY)'
                     @pulling-down="onPullingDown"
                     @pulling-up="onPullingUp">
    <div>
      <app-header></app-header>
      <!-- <header>
    <div class="headerDiv">
      <span class="head_icon"></span>
      <h1 class="title">湖北省安全生产网络培训系统</h1>
    </div>
  </header> -->
      <div class="main">
        <h1 class="column">
          <span class="column_icon"></span>课件列表
        </h1>
        <div style="padding:0 15px;padding-top:25px;">
          <x-table :cell-bordered="false">
            <thead>
              <tr>
                <th width="30%"><p>课件名称</p></th>
                <th width="15%"><p>课件类型</p></th>
                <th width="15%"><p>课件时长</p></th>
                <th width="15%"><p>已修时长</p></th>
                <th width="25%"><p>完成状态</p></th>
                <th width="20%">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in wareList" :key="index">
                <td><span class="courseName">{{item.courseWareName}}</span></td>
                <td>{{item.wareType}}</td>
                <td>{{item.courseWareTime}}</td>
                <td>{{item.studyDuration}}</td>
                <td><span v-if="item.status">{{item.status?'已完成':'未完成'}}</span><span v-else style="color:red;">{{item.status?'已完成':'未完成'}}</span></td>
                <td>
                  <span v-if="item.wareType=='视频'" class="operation" @click="studyWare(item)">学习</span>
                  <span v-else class="operation" @click="downLoadDoc(item)">下载</span>
                </td>
              </tr>
            </tbody>
          </x-table>
        </div>
      </div>
    </div>
  </vue-better-scroll>
</template>

<script>
  import { XTable } from "vux";
  import VueBetterScroll from "vue2-better-scroll"
  import videoPlayer from '@/components/Study';
  import { getCourseWareList, saveCourseWareRecord } from "@/api/trainClass";
  import { download } from '@/utils/common'
  import appHeader from "../../components/header";

export default {
  name: "login",
    components: {
      appHeader,
    XTable,
    VueBetterScroll,
    videoPlayer
  },
  data() {
    return {
      wareList: [],
      listQuery: {
        pi: 1,
        ps: 20,
        skipCount: 0,
        maxResultCount: 20,
        trainClassId: '',
        courseId:''
      },
      trainClassId: '',
      courseId: '',
      coursewareId: '',
      studyDuration:'',
      scrollbarObj: { fade: true },
      pullDownRefreshObj: {
        threshold: 90,
        stop: 40
      },
      pullUpLoadObj: {
        threshold: 0,
        txt: {
          more: "加载更多",
          noMore: "没有更多数据了"
        }
      },
      startY: 0,
      scrollToX: 0,
      scrollToY: 0,
      scrollToTime: 700,
    };
  },
    created() {
      this.trainClassId = this.$route.query.id;
      this.courseId = this.$route.query.cuid;
      this.search();
    },
    methods: {
      search() {
        let that = this;
        that.listQuery.trainClassId = that.trainClassId;
        that.listQuery.courseId = that.courseId;
        that.listQuery.pi = 1;
        that.listQuery.skipCount = (that.listQuery.pi - 1) * that.listQuery.ps;
        getCourseWareList(this.listQuery).then(response => {
          that.wareList = response.items;
        })
      },
      fetchData() {
        let that = this;
        getCourseWareList(this.listQuery).then(response => {
          this.wareList = this.wareList.concat(response.items);
          let totalAllCount = response.totalCount;
          let resultCount = this.wareList.length;
          if (parseInt(resultCount) < parseInt(totalAllCount)) {
            this.$refs['scrollqq'].forceUpdate(true);
          } else {
            this.$refs['scrollqq'].forceUpdate(false);
          }
        })
      },
      onPullingUp() {
        let limitcount = this.wareList.length;
        this.listQuery.skipCount = limitcount;
        this.fetchData();
      },
      onPullingDown() {
        this.search();
      },
      studyWare(row) {
  
        this.$router.push('/videoPlayer?videoUrl=' + row.courseWareUrl + '&coursewareId=' + row.id + '&studyDuration=' + row.studyDuration + '&trainClassId=' + this.trainClassId + '&courseId=' + this.courseId);
      },
      downLoadDoc(row) {
        let l = document.createElement("a");
        l.download = "a.txt";
        l.style.display = "none";
        l.href = row.courseWareUrl;
        document.body.appendChild(l)
        l.click();
        document.body.removeChild(l);
       
        let that = this;
       // download(row.courseWareUrl, row.courseWareName + row.courseWareUrl.substr(row.courseWareUrl.lastIndexOf('.')));
        saveCourseWareRecord({
          trainClassId: this.trainClassId,
          courseId: this.courseId,
          courseWareId: row.id
        }).then(response => {
          if (response) {
             //培训评估
            this.$router.push('/trainEvaluation2?id=' + that.trainClassId + '&cuid=' + that.courseId);
          }

          that.search();
        });

      },

    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header {
  height: 64px;
  background-color: #2269ff;
}
.headerDiv {
  padding-top: 28px;
}
.title {
  font-size: 18px;
  color: #ffffff;
  text-align: center;
}
.head_icon {
  display: inline-block;
  background: url("../../assets/images/back@3x.png") no-repeat;
  background-size: 100% 100%;
  width: 13px;
  height: 22px;
  position: absolute;
  left: 15px;
  top: 29px;
}
.main {
  padding: 18px 0px 20px 0px;
  text-align: left;
  padding-top: 90px;
}
.column_icon {
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: #2269ff;
  border-radius: 2px;
  position: relative;
  left: -12px;
  top: 2px;
}
.column {
  font-size: 17px;
  margin-left: 27px;
  margin-bottom: 5px
}
.operation{
    display: inline-block;
    width: 65px;
    height: 25px;
    border-radius: 5px;
    background-color: #2269ff;
    vertical-align: middle;
    line-height: 25px;
    color: #ffffff;
    text-align:center
}
.vux-table {
    line-height:normal;
    border-collapse: collapse;
}
.vux-table th{
    border-top:0;
    font-weight:bold;
    font-size:15px;
    text-align:center
}
.vux-table th p{
  display:inline-back;
  width:40px;
  margin:auto;
  line-height:16px
}
.vux-table td img{
 width:25px;
 height:30px
}
.vux-table:after {
    border-top:none;
}
.vux-table td,.vux-table th{
   height: 50px;
   padding: 0 auto
}
.vux-table td{
   font-size:14px;
}
.courseName{
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-align:left;
line-height:16px
}
thead {
    border: 0
}
.yellow{
    color: #fe0000
}
</style>
